<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹窗广告</title>
    <link rel="stylesheet" href="composition.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        img {
            width: 300px;
            height: 200px;
        }
        #adv {
            position: fixed;
            bottom:-200px;
            right: 0;
        }
        #btn {
            font-size: 12px;
        }   
    </style>
</head>
<body>
    <div id="adv">
        <div id="btn">关闭</div>
        <img src="广告.jpg">
    </div>
    <script>
        var timer1 = null;
        var timer2 = null;
        var adv = document.getElementById("adv");
        var css = document.defaultView.getComputedStyle(adv,null);
        function moveUp() {//弹窗上升
            var bottom = parseInt(css.bottom);
            if (bottom < 0) {
                bottom += 2;
                adv.style.bottom = bottom + "px";
            }else{
                clearInterval(timer1);
                timer1 = null;
            }
        }
        function moveDown() {//弹窗下降
            var bottom = parseInt(css.bottom);
            if (bottom > -250) {
                bottom -= 2;
                adv.style.bottom = bottom + "px";
            }else{
                clearInterval(timer1);
                timer1 = null;
                timer2 = setTimeout(function() {
                    timer1 = setInterval(moveUp,20)
                },5000);
            }
        }
        window.onload = function() {
            timer1 = setInterval(moveUp, 20);
        }
        var btn = document.getElementById("btn");
        btn.onclick = function() {
            if (!timer1) {//当弹窗升降时点击关闭不会生效
                timer1 = setInterval(moveDown,20);
            }
        }
    </script>
</body>
</html>